<template>
  <div class="vipBindRecord">
    <c-title :hide="false" text="绑定记录"></c-title>
    <div class="list" v-for="(item,index) in listData" :key="index">
      <div class="img" v-if="item.has_one_owner_member">
        <img :src="item.has_one_owner_member.avatar" alt="" />
      </div>
      <div class="user">
        <div class="name" v-if="item.has_one_owner_member">{{item.has_one_owner_member.nickname}}</div>
        <div class="time" v-if="item.invalid_time_str">解绑时间：{{item.invalid_time_str}}</div>
        <div class="time" v-if="item.start_time_str">绑定时间：{{item.start_time_str}}</div>
      </div>
      <div class="typeTxt">{{item.status_name}}</div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      listData: [],
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    getData() {
      $http
        .post("plugin.debt-shop.frontend.vip.bindLog", {}, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.page = 1;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.listData = response.data.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .post(
            "plugin.debt-shop.frontend.vip.bindLog",
            {
              page: this.page,
            },
            "加载中"
          )
          .then(
            (response) => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.listData = this.listData.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.vipBindRecord {
  min-height: 100vh;

  .list {
    margin: 0.63rem;
    background-color: #fff;
    display: flex;
    padding: 0.91rem 0.78rem 0.91rem 0.78rem;

    .typeTxt {
      font-size: 0.88rem;
      color: #f15353;
    }

    .user {
      flex: 1;
      height: 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 0.88rem;
      color: #2f2f2f;
      margin-left: 0.63rem;

      .time {
        font-size: 0.75rem;
        color: #7e7e7e;
      }
    }

    .img {
      width: 2.5rem;
      height: 2.5rem;
      background-color: #b6b6b6;
      border-radius: 100%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
  }
}
</style>
